<!-- 个人信息 -->
<template>
  <view :style="isComponents ? 'height:auto;' : 'height:100vh;background-color: #F5F5F5;'">
    <view class="myInfoPage">
      <view class="mx-15 disFlxJS linh-50">
        <view>
          <view>头像</view>
        </view>
        <button
          open-type="chooseAvatar"
          class="buttonStyleNone"
          @chooseavatar="chooseavatarFn"
        >
          <view class="disFlxAC">
            <u-image
              v-if="postParams.headimg"
              :src="postParams.headimg"
              mode="aspectFill"
              width="100rpx"
              height="100rpx"
              shape="circle"
            ></u-image>
            <text v-else style="color: #c8c9cc">请上传头像</text>
            <u-icon name="arrow-right" color="#AAABAB" />
          </view>
        </button>
      </view>
      <view class="mx-15 disFlxJS linh-50">
        <view>
          <view>姓名</view>
        </view>
        <view class="disFlxAC">
          <input
            placeholder="请输入姓名"
            v-model="postParams.userName"
            style="text-align: right;"
            :maxlength="7"
            placeholderClass="fz-14" 
            placeholderStyle="color: #AAABAB;" />
        </view>
      </view>
      <view class="mx-15 disFlxJS linh-50">
        <view>
          <view>性别</view>
        </view>
        <view class="disFlxAC" @click="sexChangeShow = true">
          <text class="pl-50 pr-10" v-if="postParams.sex">{{
            postParams.sex === "0" ? "男" : "女"
          }}</text>
          <text v-else style="color: #c8c9cc"> 请选择性别 </text>
          <u-icon name="arrow-right" color="#AAABAB" />
        </view>
      </view>
      <view class="mx-15 disFlxJS linh-50">
        <view>
          <view>年龄</view>
        </view>
        <view class="disFlxAC" @click="birthdayChangeShow = true">
          <text class="pl-50 pr-10" v-if="age">{{ age }}</text>
          <text v-else style="color: #c8c9cc"> 请选择出生日期 </text>
          <u-icon name="arrow-right" color="#AAABAB" />
        </view>
      </view>
    </view>

    <view class="mx-16 py-30">
      <u-button
        type="primary"
        text="保存"
        :customStyle="{
          fontSize: '32rpx',
          borderRadius: '20rpx',
          height: '88rpx',
        }"
        :throttleTime="500"
        :disabled="disabled"
        @click="setUserInfo"
      ></u-button>
    </view>

    <u-popup
      :show="sexChangeShow"
      :round="10"
      closeOnClickOverlay
      @close="sexChangeShow = false"
    >
      <view class="fz-17 fw-5">
        <view
          class="linh-50 tc borderBottom"
          :class="{ colorZS: postParams.sex === '0' }"
          @click="changeSex('0')"
          >男</view
        >
        <view
          class="linh-50 tc borderBottom"
          :class="{ colorZS: postParams.sex === '1' }"
          @click="changeSex('1')"
          >女</view
        >
        <view style="height: 12rpx; background-color: #f5f5f5"></view>
        <view class="linh-50 tc" @click="sexChangeShow = false">取消</view>
      </view>
    </u-popup>
    <u-datetime-picker
      :show="birthdayChangeShow"
      :title="datetimeObj.title"
      :maxDate="datetimeObj.maxDate"
      :minDate="datetimeObj.minDate"
      :loading="true"
      v-model="dateTime"
      mode="date"
      @confirm="changeTime"
      @cancel="birthdayChangeShow = false"
    ></u-datetime-picker>
  </view>
</template>

<script>
import uploadFile from "@/utils/obsutil/uploadFile";
import userApi from "@/api/user.js";
const dayjs = require("dayjs");

export default {
  props: {
    // 是否为组件模式
    isComponents: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    disabled() {
      if(!this.postParams.headimg || !this.postParams.userName || !this.postParams.sex || !this.postParams.birthday){
        return true
      }else{
        return false
      }
    }
  },
  data() {
    return {
      postParams: {
        headimg: "",
        userName: "",
        sex: "",
        birthday: "",
      },

      sexChangeShow: false,
      birthdayChangeShow: false,
      datetimeObj: {
        title: "出生日期",
        maxDate: Date.now(), // 当前时间
        minDate: Date.now() - 86400000 * 365 * 100, // 100年前
      },
      dateTime: Date.now() - 86400000 * 365 * 30, // 默认30年前
      age: "",
    };
  },
  onLoad() {
    this._echo()
  },
  created(){
    this._echo()
  },
  methods: {
    // 回显用户信息
    _echo(){
      this.postParams.headimg = this.$store.state.userInfo.headimg;
      this.postParams.userName = this.$store.state.userInfo.userName;
      this.postParams.sex = this.$store.state.userInfo.sex;
      this.postParams.birthday = this.$store.state.userInfo.birthday;
      if(this.postParams.birthday){
        this.dateTime = dayjs(this.postParams.birthday).valueOf()
      }
      this.calculate();
      console.log(this.postParams);
    },
    // 上传头像
    chooseavatarFn(e) {
      const that = this;
      const { avatarUrl } = e.detail;
      uploadFile(avatarUrl, ".png", (url) => {
        that.postParams.headimg = url;
        console.log(url);
      });
    },
    // 选择性别
    changeSex(sex) {
      this.postParams.sex = sex;
      this.sexChangeShow = false;
    },

    // 切换出生日期
    changeTime() {
      this.birthdayChangeShow = false;
      setTimeout(() => {
        this.postParams.birthday = dayjs(this.dateTime).format("YYYY-MM-DD");
        this.calculate();
      }, 1000);
    },
    // 计算显示年龄
    calculate() {
      if (!this.postParams.birthday) return;
      const a = dayjs(this.postParams.birthday);
      const b = dayjs();
      this.age = `${-a.diff(b, "year")}岁`;
    },
    // 设置用户信息
    setUserInfo() {
      const that = this;
      userApi.updateUserInfo(this.postParams).then((res) => {
        this.$store.dispatch("getUserInfo");
        uni.showToast({
          title: "修改成功",
          icon: "none",
          complete: () => {
            if(that.isComponents){
              that.$emit('editSuccess')
            }else{
              setTimeout(() => {
                that.$store.dispatch("updateMyProfile"); // 更新用户信息
                that.goBack(); // 返回上一页
              }, 1500);
            }
          }
        });
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.myInfoPage {
  background-color: #ffffff;
  .disFlxJS + .disFlxJS {
    border-top: solid 1px #f5f5f5;
  }
}

.borderBottom {
  border-bottom: solid 1px #f5f5f5;
}
.colorZS {
  color: #5a86ff;
}
</style>